<template>
<div class="jh-clock">
    <canvas ref="canvas" :width="width ? width : 300" :height="height ? height : 300"></canvas>
</div>
</template>

<script>
export default {
    props: {
        height: Number,
        width: Number,
        theme: Number,
        color: String,
        shadow: Boolean
    },
    data() {
        return {
            ct: null,
            timer: null,
            pointer: {
                h: 0,
                i: 0,
                s: 0
            },

        }
    },
    computed: {
        canvas() {
            return this.$refs.canvas
        }
    },
    mounted() {
        if (!this.canvas) {
            console.error('找不到画布')
            return
        }
        this.ct = this.canvas.getContext('2d')
        this.init()
    },
    destroyed(){
        clearInterval(this.timer);
    },
    methods: {
        init() {

            const time = new Date();
            this.pointer = {
                h: 360 * time.getHours() / 12 * Math.PI / 180,
                i: 360 * time.getMinutes() / 60 * Math.PI / 180,
                s: 360 * time.getSeconds() / 60 * Math.PI / 180
            }
            this.ct.translate(this.canvas.width / 2, this.canvas.height / 2);
            this.run();
        },
        drawbg() {
            this.ct.font = this.canvas.width / 15 + 'px 微软雅黑';
            if (!this.color) {
                switch (this.style) {
                    case 0: //默认
                        this.ct.strokeStyle = '#000';
                        this.ct.fillStyle = '#000';
                        break;
                    case 1: //
                        this.ct.strokeStyle = '#F08080';
                        this.ct.fillStyle = '#F08080';
                        break;
                    case 2: //
                        this.ct.strokeStyle = '#EE2C2C';
                        this.ct.fillStyle = '#EE2C2C';
                        break;
                    case 3: //
                        this.ct.strokeStyle = '#27408B';
                        this.ct.fillStyle = '#27408B';
                        break;
                    case 4: //
                        this.ct.strokeStyle = '#548B54';
                        this.ct.fillStyle = '#548B54';
                        break;
                }
            } else {
                this.ct.strokeStyle = this.color;
                this.ct.fillStyle = this.color;
            }

            //刻度
            this.ct.rotate(0);
            for (var i = 0; i < 24; i++) {
                let deg = 360 / 24 * Math.PI / 180;
                if (i == 0) {
                    this.ct.fillText('12', -this.canvas.width / 15 / 2, -this.canvas.height / 2 + 15);
                    this.ct.rotate(deg);
                } else if (i == 6) {
                    this.ct.fillText('3', -this.canvas.width / 15 / 2, -this.canvas.height / 2 + 15);
                    this.ct.rotate(deg);
                } else if (i == 12) {
                    this.ct.fillText('9', -this.canvas.width / 15 / 2, -this.canvas.height / 2 + 15);
                    this.ct.rotate(deg);
                } else if (i == 18) {
                    this.ct.fillText('9', -this.canvas.width / 15 / 2, -this.canvas.height / 2 + 15);
                    this.ct.rotate(deg);
                } else {
                    this.ct.fillRect(0, -this.canvas.height / 2, this.canvas.width / 100, this.canvas.width / 30);
                    this.ct.rotate(deg);
                }
            }
            //原点
            this.ct.rotate(-Math.PI * 2);
            this.ct.arc(0, 0, this.canvas.width / 40, 0, Math.PI * 2);
            this.ct.fill();

        },
        draw() {
            if (this.shadow) {
                //阴影
                this.ct.shadowBlur = 6;
                this.ct.shadowColor = "rgba(0,0,0,0.4)";
                this.ct.shadowOffsetX = 4;
                this.ct.shadowOffsetY = 4;
            }

            this.ct.lineCap = 'round'; //线段样式
            this.ct.clearRect(-this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
            this.drawbg();
            this.ct.rotate(0);
            //秒针
            this.ct.rotate(this.pointer.s);
            this.ct.lineWidth = 2;
            this.ct.beginPath();
            this.ct.moveTo(0, 15);
            this.ct.lineTo(0, -this.canvas.height / 2 + 30);
            this.ct.stroke();
            this.ct.beginPath();
            this.ct.arc(0, -this.canvas.height / 2 + 40, this.canvas.width / 80, 0, Math.PI * 2);
            this.ct.fill();
            this.ct.rotate(-this.pointer.s);
            //分针
            this.ct.rotate(this.pointer.i);
            this.ct.lineWidth = 4;
            this.ct.beginPath();
            this.ct.moveTo(0, 15);
            this.ct.lineTo(0, -this.canvas.height / 3 + 30);
            this.ct.stroke();
            this.ct.beginPath();
            this.ct.arc(0, -this.canvas.height / 3 + 40, this.canvas.width / 60, 0, Math.PI * 2);
            this.ct.fill();
            this.ct.rotate(-this.pointer.i);
            //时针
            this.ct.rotate(this.pointer.h);
            this.ct.lineWidth = 6;
            this.ct.beginPath();
            this.ct.moveTo(0, 15);
            this.ct.lineTo(0, -this.canvas.height / 4 + 30);
            this.ct.stroke();
            this.ct.beginPath();

            this.ct.rotate(-this.pointer.h);
        },
        run() {
            this.draw();
            clearInterval(this.timer);
            let _this = this;
            this.timer = setInterval(() => {
                let time = new Date();
                _this.pointer.h = 360 * time.getHours() / 12 * Math.PI / 180;
                _this.pointer.i = 360 * time.getMinutes() / 60 * Math.PI / 180;
                _this.pointer.s = 360 * time.getSeconds() / 60 * Math.PI / 180;
                _this.draw();
            }, 1000)
        }
    }
}
</script>

<style scoped>
.jh-clock {
    text-align: center;
}
</style>>
